<template>
	<div class="app-container">
		<div class="wrapper">
			<h4>建筑物震害数据</h4>
			<el-row class="row-bgs" justify="start">
				<el-col :span="8">
					<div class="buildVulner" @click="importParmsClick('buildVulner')"></div>
				</el-col>
			</el-row>
			<el-dialog v-model="dialogVisible" title="导入数据" width="30%">
				<div class="downloadModel">
					下载导入模板<span @click="importTemplate">{{ downloadFileName }}</span>
				</div>
				<el-upload ref="uploadRef" :action="uploadFileUrl" :before-upload="beforeUpload" :before-remove="beforeRemove"
					:on-success="uploadSuccess" :on-error="uploadError" :file-list.sync="fileList" :headers="headers"
					:multiple="false" :limit="1" :auto-upload="false">
					<el-button type="primary" class="icon-Angle-upload">选择本地文件</el-button>
				</el-upload>
				<template #footer>
					<span class="dialog-footer">
						<el-button type="primary" @click="submitUpload">确定</el-button>
						<el-button @click="cancleUpload">取 消</el-button>
					</span>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getToken } from "@/utils/auth";

const { proxy } = getCurrentInstance();
const baseURL = import.meta.env.VITE_APP_BASE_API;
const headers = ref({ token: "token " + getToken() });
const uploadRef = ref();

// 显示弹框
const dialogVisible = ref(false);
// 确定按钮事件
const submitUpload = (res) => {
	dialogVisible.value = false;
	uploadRef.value.submit();
}
// 取消按钮事件
const cancleUpload = (res) => {
	dialogVisible.value = false;
}

// 上传地址
const uploadFileUrl = ref(baseURL + "/sdoBuildings/uploadHsoBuildings");
// 文件列表
const fileList = ref([]);

//下载标题切换
// const downloadInfo = reactive({   // 方式1 用reactive
//     fileName: 'hello',
// })
const downloadFileName = ref('建筑物历史震害数据模板.xlsx') // 方式2 
const importParmsClick = (val) => {
	fileList.value = [];
	switch (val) {
		case 'buildVulner':
			dialogVisible.value = true
			downloadFileName.value = '建筑物历史震害数据模板.xlsx'
			uploadFileUrl.value = baseURL + "/sdoBuildings/uploadHsoBuildings"
			break;
		default:
			break;
	}
}

// 模板下载
function importTemplate() {
	proxy.download("/base/product/downloadExcel", {
		fileName: downloadFileName.value
	}, downloadFileName.value);
};

// 文件上传
// 移除前
const beforeRemove = () => {
	fileList.value = [];
};
// 上传前
const beforeUpload = (file) => {
	const fileSize = file.size / 1024 / 1024;
	if (fileSize > 200) {
		$message.error('文件大小不能超过200M!');
		return false;
	}
	const fileReg = /.xls|.xlsx/;
	if (!fileReg.test(file.name)) {
		$message.error('请选择.xls .xlsx格式文件');
		return false;
	}
	return true;
};
// 上传成功
const uploadSuccess = (response, uploadFile, uploadFiles) => {
	if (response.code === 200) {
		proxy.$modal.msgSuccess("上传文件成功");
	} else {
		proxy.$modal.msgError(response.message || "导入失败，请检查表头是否改动");
	}
}
// 上传失败
const uploadError = (response, uploadFile, uploadFiles) => {
	proxy.$modal.msgError(response.message || "导入失败，请检查表头是否改动");
}
</script>

<style lang="scss">
.wrapper {
	position: relative;

	h4 {
		font-size: 20px;
		font-weight: bold;
		color: #107ce5;
		text-align: center;
	}

	.row-bgs {
		width: 100%;
		display: flex;
		margin-bottom: 30px;

		&:last-child {
			margin-bottom: 0;
		}

		div {
			width: 360px;
			height: 150px;
			display: flex;
			justify-content: center;
		}

		.buildVulner {
			background: url("../../../../assets/importImages/jzwlszhxx.png");
		}
	}

	.downloadModel {
		font-size: 16px;
		line-height: 60px;

		span {
			color: #107ce5;
			cursor: pointer;
		}
	}
}
</style>

